import React, { useEffect, useState } from 'react';
import { 
  Modal, 
  Descriptions, 
  Image, 
  Tag, 
  Skeleton, 
  Typography, 
  Divider
} from 'antd';
import { getArticleDetail } from '../service/api';
import type { ArticleItem } from '../service/types';
import './ArticleDetail.scss';

const { Title, Paragraph } = Typography;

interface ArticleDetailProps {
  visible: boolean;
  articleId: number | null;
  tableName: string;
  onClose: () => void;
}

const ArticleDetail: React.FC<ArticleDetailProps> = ({
  visible,
  articleId,
  tableName,
  onClose
}) => {
  const [article, setArticle] = useState<ArticleItem | null>(null);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    if (visible && articleId) {
      fetchArticleDetail();
    }
  }, [visible, articleId]);
  
  const fetchArticleDetail = async () => {
    if (!articleId) return;
    
    setLoading(true);
    try {
      const res = await getArticleDetail(articleId, tableName);
      if (res.code === 0) {
        setArticle(res.data);
      }
    } catch (error) {
      console.error('获取文章详情失败:', error);
    } finally {
      setLoading(false);
    }
  };
  
  // 格式化时间
  const formatTime = (timeStr: string | undefined) => {
    if (!timeStr) return '';
    
    const date = new Date(timeStr);
    return `${date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')} ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })}`;
  };
  
  return (
    <Modal
      title="文章详情"
      open={visible}
      onCancel={onClose}
      footer={null}
      width={800}
      destroyOnClose
      className="article-detail-modal"
    >
      {loading ? (
        <Skeleton active paragraph={{ rows: 10 }} />
      ) : article ? (
        <div className="article-detail-container">
          <Title level={3}>{article.title}</Title>
          
          <div className="article-meta">
            <Tag color="blue">{article.catename}</Tag>
            <span className="meta-item">阅读次数: {article.readcount}</span>
            <span className="meta-item">添加时间: {formatTime(article.addtime)}</span>
            <span className="meta-item">
              状态: {article.active === 1 ? <Tag color="green">有效</Tag> : <Tag color="red">无效</Tag>}
            </span>
            <span className="meta-item">
              推荐: {article.recommend === 1 ? <Tag color="gold">是</Tag> : <Tag color="default">否</Tag>}
            </span>
          </div>
          
          <Divider />
          
          {article.imgsrc && (
            <div className="article-image-container">
              <Image 
                src={article.imgsrc} 
                alt={article.title} 
                className="article-image"
              />
            </div>
          )}
          
          <div className="article-desc">
            <Paragraph strong>简介:</Paragraph>
            <Paragraph>{article.desc}</Paragraph>
          </div>
          
          <Divider />
          
          <div className="article-content">
            <Paragraph strong>详细内容:</Paragraph>
            {article.detail ? (
              <div 
                className="detail-content" 
                dangerouslySetInnerHTML={{ __html: article.detail }}
              />
            ) : (
              <Paragraph type="secondary">暂无详细内容</Paragraph>
            )}
          </div>
        </div>
      ) : (
        <div className="article-not-found">
          <Paragraph type="secondary">文章不存在或已被删除</Paragraph>
        </div>
      )}
    </Modal>
  );
};

export default ArticleDetail; 